import { _decorator, Button, Node, SpriteFrame } from 'cc';
import { BasePanel } from '../../../../scripts/libs/ui/BasePanel';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { udm } from '../../../../scripts/managers/UserDataManager';
import { Sprite } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('SettingPanel')
export class SettingPanel extends BasePanel {

    @property(Button)
    backButton: Button = null;

    @property(Button)
    musicButton: Button = null;

    @property([SpriteFrame])
    musicSpriteFrame: SpriteFrame[] = [];

    @property(Button)
    vibrateButton: Button = null;

    @property([SpriteFrame])
    vibrateSpriteFrame: SpriteFrame[] = [];

    @property(Button)
    zhLangButton: Button = null;

    @property(Button)
    enLangButton: Button = null;

    useObserves() {
        return [
            BindButton(this.backButton).subscribe(this.backbuttonClicked.bind(this)),
            BindButton(this.musicButton).subscribe(this.musicButtonClicked.bind(this)),
            BindButton(this.vibrateButton).subscribe(this.vibrateButtonClicked.bind(this)),
            BindButton(this.zhLangButton).subscribe(this.zhLangButtonClicked.bind(this)),
            BindButton(this.enLangButton).subscribe(this.enLangButtonClicked.bind(this)),
            udm.bgmOn.subscribe(this.refreshBGM.bind(this)),
            udm.vibrateOn.subscribe(this.refreshVibrate.bind(this)),
        ];
    }

    refreshBGM() {
        this.musicButton.getComponent(Sprite).spriteFrame = this.musicSpriteFrame[udm.bgmOn.value ? 0 : 1];
    }

    refreshVibrate() {
        this.vibrateButton.getComponent(Sprite).spriteFrame = this.vibrateSpriteFrame[udm.vibrateOn.value ? 0 : 1];
    }

    backbuttonClicked() {
        this.log('backButtonClicked');
        SettingPanel.CloseProcess();
    }

    musicButtonClicked() {
        this.log('musicButtonClicked');
        udm.bgmOn.value = !udm.bgmOn.value;
        udm.sfxOn.value = udm.bgmOn.value; // 没有分开控制
        udm.save();
    }

    vibrateButtonClicked() {
        this.log('vibrateButtonClicked');
        udm.vibrateOn.value = !udm.vibrateOn.value;
        udm.save();
    }

    zhLangButtonClicked() {
        this.log('zhLangButtonClicked');
        udm.lang.value = 'zh';
        udm.save();
    }

    enLangButtonClicked() {
        this.log('enLangButtonClicked');
        udm.lang.value = 'en';
        udm.save();
    }
}

